<template>
  <div>
    <el-table :data="tableData" style="width: 90%" height="800"
              :header-cell-style="{background:'#fdfdfd',color:'#409eff',textAlign: 'center'}"
              :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column prop="userId" label="反馈人" width="300px"/>
      <el-table-column prop="feedTxt" label="反馈信息" width="500px"/>
      <el-table-column prop="fileHash" label="文件哈希" width="500px"/>
      <el-table-column label="回复" width="100px">
        <template v-slot="scope">
          <el-button type="primary" v-if="scope.row.isReplied" style="width: 60px" @click="isReply">已回复</el-button>
          <el-button type="primary" @click="go2reply(scope.row)" v-else>回复</el-button>
        </template>

      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogTableVisible" title="回复" width="850px" height="60%" draggable="true">
      <div>
        <strong>请输入回复消息:</strong>
        <br>
        <textarea v-model="replyContent"></textarea>
      </div>
      <el-popconfirm title="确定要退出吗？"
                     @confirm="dialogTableVisible=false"
      >
        <template #reference>
          <el-button style="margin-left: 80%;margin-top: 20px">取消</el-button>
        </template>
      </el-popconfirm>
      <el-popconfirm title="确定要如此回复吗？"
                     @confirm="reply"
      >
        <template #reference>
          <el-button type="primary" style="margin-top: 20px">确认</el-button>
        </template>
      </el-popconfirm>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "system-feedback",
  data() {
    return {
      tableData: [],
      dialogTableVisible: false,
      dialogTableVisible2: false,
      replyContent: '',
      replyData: ""
    }
  },
  methods: {
    go2reply(row) {
      this.dialogTableVisible = true
      this.replyData = row
    },
    reply() {
      if (this.replyContent === '') {
        this.$message.error("输入不能为空！！")
      } else {
        let params = new URLSearchParams()
        params.append("feedbackId", this.replyData.id)
        params.append("content", this.replyContent)
        axios.post('http://120.48.51.66:8081/feedback/replyFeedback', params).then(function (response) {
          console.log(response)
        }).catch(function (e) {
          console.log(e)
        })
        this.replyContent = ''
        setTimeout(() => {
          axios.get("http://120.48.51.66:8081/feedback/getAllFeedback").then((response) => {
            sessionStorage.setItem("allFeedback", (JSON).stringify(response.data.data.feedbackList))
            this.tableData = JSON.parse(sessionStorage.getItem('allFeedback'))
          })
        }, 10)

      }
    },
    isReply() {
      this.$message.error("请勿重复回复！！")
    }
  },
  beforeCreate() {
    axios.get("http://120.48.51.66:8081/feedback/getAllFeedback").then((response) => {
      console.log("system", response)
      sessionStorage.setItem("allFeedback", (JSON).stringify(response.data.data.feedbackList))
      this.tableData = JSON.parse(sessionStorage.getItem('allFeedback'))
    })
  }
}
</script>

<style scoped>
textarea {
  margin-top: 5px;
  height: 90px;
  width: 800px;
  resize: none;
}
</style>
